<template>
  <div>
    <div id="container" style="width:100%;height:500px;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
  methods: {
    initMap() {
      let map = new AMap.Map('container', {
        zoom: 10, // 设置地图显示的缩放级别
        center: [106.222515, 40.810884], // 设置地图中心点坐标
        viewMode: '3D' // 是否为3D地图模式
      });

      // 添加多个标记点
      // this.addMarkers(map);
    },
    addMarkers(map) {
      const markersData = [
        { position: [116.397428, 39.90923], title: "点1" },
        { position: [116.407428, 39.91923], title: "点2" },
        // 可以继续添加更多的点...
      ];

      markersData.forEach(markerInfo => {
        let marker = new AMap.Marker({
          position: new AMap.LngLat(...markerInfo.position), // 新建点标记
          title: markerInfo.title,
          offset: new AMap.Pixel(-16, -32) // 设置偏移量，使图标居中
        });

        // 将创建好的点标记添加到已有的地图实例中
        map.add(marker);

        // 如果需要为每个标记添加点击事件监听器，可以在下面这样做：
        // marker.on('click', () => {
        //   alert(`你点击了 ${markerInfo.title}`);
        // });
      });

      // 根据地图上添加的覆盖物分布情况，自动调整地图视野
      map.setFitView();
    }
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 500px;
}
</style>
